<div id="content" data-sparkline-container data-easy-pie-chart-container>
    <div class="row">
        <big-breadcrumbs items="['E-Commerce', 'Products Detail']" icon="shopping-cart"
                         class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></big-breadcrumbs>


        <div class="col-xs-12 col-sm-5 col-md-5 col-lg-8 text-right">

            <a href-void class="btn btn-default shop-btn">
                <i class="fa fa-3x fa-shopping-cart"></i>
                <span class="air air-top-right label-danger txt-color-white padding-5">10</span>
            </a>
            <a href-void class="btn btn-default">
                <i class="fa fa-3x fa-print"></i>
            </a>

        </div>
    </div>
    <!-- row -->
    <section id="widget-grid" class="">

        <!-- row -->

        <div class="row">

            <div class="col-sm-12 col-md-12 col-lg-12">
                <!-- product -->
                <div class="product-content product-wrap clearfix product-deatil">
                    <div class="row">
                        <div class="col-md-5 col-sm-12 col-xs-12 ">
                            <div class="product-image">
                                <div id="myCarousel-2" class="carousel slide" data-smart-ride-carousel>
                                    <ol class="carousel-indicators">
                                        <li data-target="#myCarousel-2" data-slide-to="0" class=""></li>
                                        <li data-target="#myCarousel-2" data-slide-to="1" class="active"></li>
                                        <li data-target="#myCarousel-2" data-slide-to="2" class=""></li>
                                    </ol>
                                    <div class="carousel-inner">
                                        <!-- Slide 1 -->
                                        <div class="item active">
                                            <img src="styles/img/demo/e-comm/detail-1.png" alt="">
                                        </div>
                                        <!-- Slide 2 -->
                                        <div class="item">
                                            <img src="styles/img/demo/e-comm/detail-2.png" alt="">
                                        </div>
                                        <!-- Slide 3 -->
                                        <div class="item">
                                            <img src="styles/img/demo/e-comm/detail-3.png" alt="">
                                        </div>
                                    </div>
                                    <a class="left carousel-control" href="#myCarousel-2" ng-non-bindable  data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a>
                                    <a class="right carousel-control" href="#myCarousel-2" ng-non-bindable data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-7 col-sm-12 col-xs-12">

                            <h2 class="name">
                                Product Name Title Here
                                <small>Product by <a href-void>Adeline</a></small>
                                <i class="fa fa-star fa-2x text-primary"></i>
                                <i class="fa fa-star fa-2x text-primary"></i>
                                <i class="fa fa-star fa-2x text-primary"></i>
                                <i class="fa fa-star fa-2x text-primary"></i>
                                <i class="fa fa-star fa-2x text-muted"></i>
                                <span class="fa fa-2x"><h5>(109) Votes</h5></span>

                                <a href-void>109 customer reviews</a>

                            </h2>
                            <hr>
                            <h3 class="price-container">
                                $129.54
                                <small>*includes tax</small>
                            </h3>

                            <div class="certified">
                                <ul>
                                    <li><a href-void>Delivery time<span>7 Working Days</span></a></li>
                                    <li><a href-void>Certified<span>Quality Assured</span></a></li>
                                </ul>
                            </div>
                            <hr>
                            <div class="description description-tabs">


                                <ul id="myTab" class="nav nav-pills">
                                    <li class="active"><a href="#more-information" data-toggle="tab" class="no-margin">Product Description </a></li>
                                    <li class=""><a href="#specifications" data-toggle="tab">Specifications</a></li>
                                    <li class=""><a href="#reviews" data-toggle="tab">Reviews</a></li>
                                </ul>
                                <div id="myTabContent" class="tab-content">
                                    <div class="tab-pane fade active in" id="more-information">
                                        <br>
                                        <strong>Description Title</strong>
                                        <p>Integer egestas, orci id condimentum eleifend, nibh nisi pulvinar eros, vitae ornare massa neque ut orci. Nam aliquet lectus sed odio eleifend, at iaculis dolor egestas. Nunc elementum pellentesque augue sodales porta. Etiam aliquet rutrum turpis, feugiat sodales ipsum consectetur nec. </p>
                                    </div>
                                    <div class="tab-pane fade" id="specifications">
                                        <br>
                                        <dl class="">
                                            <dt>Gravina</dt>
                                            <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
                                            <dd>Donec id elit non mi porta gravida at eget metus.</dd>
                                            <dd>Eget lacinia odio sem nec elit.</dd>
                                            <br>

                                            <dt>Test lists</dt>
                                            <dd>A description list is perfect for defining terms.</dd>
                                            <br>

                                            <dt>Altra porta</dt>
                                            <dd>Vestibulum id ligula porta felis euismod semper</dd>
                                        </dl>
                                    </div>
                                    <div class="tab-pane fade" id="reviews">
                                        <br>
                                        <form method="post" class="well padding-bottom-10" onsubmit="return false;">
                                            <textarea rows="2" class="form-control" placeholder="Write a review"></textarea>
                                            <div class="margin-top-10">
                                                <button type="submit" class="btn btn-sm btn-primary pull-right">
                                                    Submit Review
                                                </button>
                                                <a href-void class="btn btn-link profile-link-btn" rel="tooltip" data-placement="bottom" title="" data-original-title="Add Location"><i class="fa fa-location-arrow"></i></a>
                                                <a href-void class="btn btn-link profile-link-btn" rel="tooltip" data-placement="bottom" title="" data-original-title="Add Voice"><i class="fa fa-microphone"></i></a>
                                                <a href-void class="btn btn-link profile-link-btn" rel="tooltip" data-placement="bottom" title="" data-original-title="Add Photo"><i class="fa fa-camera"></i></a>
                                                <a href-void class="btn btn-link profile-link-btn" rel="tooltip" data-placement="bottom" title="" data-original-title="Add File"><i class="fa fa-file"></i></a>
                                            </div>
                                        </form>

                                        <div class="chat-body no-padding profile-message">
                                            <ul>
                                                <li class="message">
                                                    <img src="styles/img/avatars/1.png" class="online">
																<span class="message-text"> 
																	<a href-void class="username">
                                                                        Alisha Molly
                                                                        <span class="badge">Purchase Verified</span> 
																		<span class="pull-right">
																			<i class="fa fa-star fa-2x text-primary"></i>
																			<i class="fa fa-star fa-2x text-primary"></i>
																			<i class="fa fa-star fa-2x text-primary"></i>
																			<i class="fa fa-star fa-2x text-primary"></i>
																			<i class="fa fa-star fa-2x text-muted"></i>
																		</span>
                                                                    </a> 
																	
																	
																	Can't divide were divide fish forth fish to. Was can't form the, living life grass darkness very image let unto fowl isn't in blessed fill life yielding above all moved 
																</span>
                                                    <ul class="list-inline font-xs">
                                                        <li>
                                                            <a href-void class="text-info"><i class="fa fa-thumbs-up"></i> This was helpful (22)</a>
                                                        </li>
                                                        <li class="pull-right">
                                                            <small class="text-muted pull-right ultra-light"> Posted 1 year ago </small>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li class="message">
                                                    <img src="styles/img/avatars/2.png" class="online">
																<span class="message-text"> 
																	<a href-void class="username">
                                                                        Aragon Zarko
                                                                        <span class="badge">Purchase Verified</span> 
																		<span class="pull-right">
																			<i class="fa fa-star fa-2x text-primary"></i>
																			<i class="fa fa-star fa-2x text-primary"></i>
																			<i class="fa fa-star fa-2x text-primary"></i>
																			<i class="fa fa-star fa-2x text-primary"></i>
																			<i class="fa fa-star fa-2x text-primary"></i>
																		</span>
                                                                    </a> 
																	
																	
																	Excellent product, love it!
																</span>
                                                    <ul class="list-inline font-xs">
                                                        <li>
                                                            <a href-void class="text-info"><i class="fa fa-thumbs-up"></i> This was helpful (22)</a>
                                                        </li>
                                                        <li class="pull-right">
                                                            <small class="text-muted pull-right ultra-light"> Posted 1 year ago </small>
                                                        </li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>


                            </div>
                            <hr>
                            <div class="row">
                                <div class="col-sm-12 col-md-6 col-lg-6">

                                    <a href-void class="btn btn-success btn-lg">Add to cart ($129.54)</a>

                                </div>
                                <div class="col-sm-12 col-md-6 col-lg-6">
                                    <div class="btn-group pull-right">
                                        <button class="btn btn-white btn-default"><i class="fa fa-star"></i> Add to wishlist </button>
                                        <button class="btn btn-white btn-default"><i class="fa fa-envelope"></i> Contact Seller</button>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <!-- end product -->
            </div>

            <div class="col-sm-12 col-md-12 col-lg-12">
                <!-- product -->
                <div class="product-content product-wrap clearfix product-deatil">
                    <div class="row">
                        <div class="col-md-5 col-sm-12 col-xs-12 ">
                            <div class="product-image">
                                <div id="myCarousel-3" class="carousel fade">
                                    <ol class="carousel-indicators">
                                        <li data-target="#myCarousel-3" data-slide-to="0" class=""></li>
                                        <li data-target="#myCarousel-3" data-slide-to="1" class="active"></li>
                                        <li data-target="#myCarousel-3" data-slide-to="2" class=""></li>
                                    </ol>
                                    <div class="carousel-inner">
                                        <!-- Slide 1 -->
                                        <div class="item active">
                                            <img src="styles/img/demo/e-comm/detail-1.png" alt="">
                                        </div>
                                        <!-- Slide 2 -->
                                        <div class="item">
                                            <img src="styles/img/demo/e-comm/detail-2.png" alt="">
                                        </div>
                                        <!-- Slide 3 -->
                                        <div class="item">
                                            <img src="styles/img/demo/e-comm/detail-3.png" alt="">
                                        </div>
                                    </div>
                                    <a class="left carousel-control" href="#myCarousel-3" ng-non-bindable data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a>
                                    <a class="right carousel-control" href="#myCarousel-3" ng-non-bindable data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-7 col-sm-12 col-xs-12">

                            <h2 class="name">
                                Product Name Title Here
                                <small>Product by <a href-void>Adeline</a></small>
                                <i class="fa fa-star fa-2x text-primary"></i>
                                <i class="fa fa-star fa-2x text-primary"></i>
                                <i class="fa fa-star fa-2x text-primary"></i>
                                <i class="fa fa-star fa-2x text-primary"></i>
                                <i class="fa fa-star fa-2x text-muted"></i>
                                <span class="fa fa-2x"><h5>(109) Votes</h5></span>

                                <a href-void>109 customer reviews</a>

                            </h2>
                            <hr>
                            <div class="row">

                                <div class="col-sm-6">
                                    <h3 class="price-container">
                                        $129.54
                                        <small>*includes tax</small>
                                    </h3>
                                </div>
                                <div class="col-sm-6 text-right">
                                    <a href-void class="btn btn-primary">Add to cart ($129.54)</a>
                                </div>
                            </div>





                            <hr>
                            <div class="description description-tabs">


                                <ul id="myTab2" class="nav nav-tabs">
                                    <li class="active"><a href="#more-information2" data-toggle="tab" class="no-margin">Product Description </a></li>
                                    <li class=""><a href="#specifications2" data-toggle="tab">Specifications</a></li>
                                    <li class=""><a href="#reviews2" data-toggle="tab">Reviews</a></li>
                                </ul>
                                <div id="myTabContent2" class="tab-content">
                                    <div class="tab-pane fade active in" id="more-information2">
                                        <br>
                                        <strong>Description Title</strong>
                                        <p>Integer egestas, orci id condimentum eleifend, nibh nisi pulvinar eros, vitae ornare massa neque ut orci. Nam aliquet lectus sed odio eleifend, at iaculis dolor egestas. Nunc elementum pellentesque augue sodales porta. Etiam aliquet rutrum turpis, feugiat sodales ipsum consectetur nec. </p>
                                    </div>
                                    <div class="tab-pane fade" id="specifications2">
                                        <br>
                                        <dl class="">
                                            <dt>Gravina</dt>
                                            <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
                                            <dd>Donec id elit non mi porta gravida at eget metus.</dd>
                                            <dd>Eget lacinia odio sem nec elit.</dd>
                                            <br>

                                            <dt>Test lists</dt>
                                            <dd>A description list is perfect for defining terms.</dd>
                                            <br>

                                            <dt>Altra porta</dt>
                                            <dd>Vestibulum id ligula porta felis euismod semper</dd>
                                        </dl>
                                    </div>
                                    <div class="tab-pane fade" id="reviews2">
                                        <br>
                                        <form method="post" class="well padding-bottom-10" onsubmit="return false;">
                                            <textarea rows="2" class="form-control" placeholder="Write a review"></textarea>
                                            <div class="margin-top-10">
                                                <button type="submit" class="btn btn-sm btn-primary pull-right">
                                                    Submit Review
                                                </button>
                                                <a href-void class="btn btn-link profile-link-btn" rel="tooltip" data-placement="bottom" title="" data-original-title="Add Location"><i class="fa fa-location-arrow"></i></a>
                                                <a href-void class="btn btn-link profile-link-btn" rel="tooltip" data-placement="bottom" title="" data-original-title="Add Voice"><i class="fa fa-microphone"></i></a>
                                                <a href-void class="btn btn-link profile-link-btn" rel="tooltip" data-placement="bottom" title="" data-original-title="Add Photo"><i class="fa fa-camera"></i></a>
                                                <a href-void class="btn btn-link profile-link-btn" rel="tooltip" data-placement="bottom" title="" data-original-title="Add File"><i class="fa fa-file"></i></a>
                                            </div>
                                        </form>

                                        <div class="chat-body no-padding profile-message">
                                            <ul>
                                                <li class="message">
                                                    <img src="styles/img/avatars/1.png" class="online">
                                                    <span class="message-text"> <a href-void class="username">John Doe <small class="text-muted pull-right ultra-light"> 2 Minutes ago </small></a> Can't divide were divide fish forth fish to. Was can't form the, living life grass darkness very image let unto fowl isn't in blessed fill life yielding above all moved </span>
                                                    <ul class="list-inline font-xs">
                                                        <li>
                                                            <a href-void class="text-info"><i class="fa fa-reply"></i> Reply</a>
                                                        </li>
                                                        <li>
                                                            <a href-void class="text-danger"><i class="fa fa-thumbs-up"></i> Like</a>
                                                        </li>
                                                        <li>
                                                            <a href-void class="text-muted">Show All Comments (14)</a>
                                                        </li>
                                                        <li>
                                                            <a href-void class="text-primary">Hide</a>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li class="message message-reply">
                                                    <img src="styles/img/avatars/3.png" class="online">
                                                    <span class="message-text"> <a href-void class="username">Serman Syla</a> eget lacinia odio sem nec eliteget lacinia odio sem nec elit. <i class="fa fa-smile-o txt-color-orange"></i> </span>

                                                    <ul class="list-inline font-xs">
                                                        <li>
                                                            <a href-void class="text-muted">1 minute ago </a>
                                                        </li>
                                                        <li>
                                                            <a href-void class="text-danger"><i class="fa fa-thumbs-up"></i> Like</a>
                                                        </li>
                                                    </ul>

                                                </li>
                                                <li class="message message-reply">
                                                    <img src="styles/img/avatars/4.png" class="online">
                                                    <span class="message-text"> <a href-void class="username">Sadi Orlaf </a> Eet lacinia odio sem nec elit. <i class="fa fa-smile-o txt-color-orange"></i> </span>

                                                    <ul class="list-inline font-xs">
                                                        <li>
                                                            <a href-void class="text-muted">a moment ago </a>
                                                        </li>
                                                        <li>
                                                            <a href-void class="text-danger"><i class="fa fa-thumbs-up"></i> Like</a>
                                                        </li>
                                                    </ul>

                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>


                            </div>
                            <hr>
                            <div class="row">
                                <div class="col-sm-12 col-md-12 col-lg-12">
                                    <div class="btn-group">
                                        <button class="btn btn-white btn-default"><i class="fa fa-star"></i> Add to wishlist </button>
                                        <button class="btn btn-white btn-default"><i class="fa fa-envelope"></i> Contact Seller</button>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <!-- end product -->
            </div>

        </div>

        <!-- end row -->

    </section>
    <!-- end row -->
</div>